<template>
	<view class="content">
		<!-- <view class="header-bg"></view> -->
		<uni-section title="开桌" type="line" :hide-bg="true" />
		<!-- 工具菜单栏 start -->
		<view class="flex-row justify-center menu-container">
			<view class="grid">
				<view class="grid-item">
					<view @click="onCreate(TableTypes.mult)" class="flex-column align-center menu-item">
						<image class="icon" :src="require('@/static/icon/menu4.png')"></image>
						<text class="text">多人计分模式</text>
					</view>
				</view>
				<view class="grid-item">
					<view @click="onCreate(TableTypes.single)" class="flex-column align-center menu-item">
						<image class="icon" :src="require('@/static/icon/menu3.png')"></image>
						<text class="text">单人计分模式</text>
					</view>
				</view>
				<view class="grid-item">
					<view @click="onCreate(TableTypes.score)" class="flex-column align-center menu-item">
						<image class="icon" :src="require('@/static/icon/menu2.png')"></image>
						<text class="text">分数池模式</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 工具菜单栏 end -->


	</view>
</template>

<script>
	import TableItem from "@/myComponents/tableItem/TableItem.vue"
	import Config from "@/vars/Config.js"
	import {
		mapState,
		mapGetters,
	} from 'vuex';
	import {
		toast,
		isEmpty,
		navigateTo,
		toastComfirm,
	} from "../../utils/helpers.js"
	import {
		TableTypes,
		TableTypesEnum,
	} from "../../vars/TableTypes.js"
	import Table from "@/api/Table.js"
	export default {
		components: {
			TableItem
		},
		data() {
			return {
				TableTypes
			}
		},

		computed: {
			...mapState("user", [
				'userInfo',
			]),
			...mapGetters("user", [
				"isEmptyUserInfo"
			])
		},
		onLoad() {
			// const accountInfo = uni.getAccountInfoSync();
			// console.log('小程序版本信息：',accountInfo.miniProgram)


		},
		async onShow() {
			await this.$store.dispatch("user/getToken")
		},

		onShareAppMessage() {
			const shareObj = {
				title: Config.appName, // 默认是小程序的名称(可以写slogan等)
				path: '/pages/index/index', // 默认是当前页面，必须是以‘/’开头的完整路径
				// 　　　　imageUrl: '',     //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
				success: function(res) {
					// 转发成功之后的回调
					if (res.errMsg == 'shareAppMessage:ok') {}
				},
				fail: function() {
					// 转发失败之后的回调
					if (res.errMsg == 'shareAppMessage:fail cancel') {
						// 用户取消转发
					} else if (res.errMsg == 'shareAppMessage:fail') {
						// 转发失败，其中 detail message 为详细失败信息
					}
				},

			};
			return shareObj
		},
		methods: {
			navigateTo,
			// 开桌
			async onCreate(type) {
				try {
					if (this.isEmptyUserInfo) { // 用户未完善信息(调起微信信息授权)
						await this.$store.dispatch("user/updateUserInfoByWx")
						if (this.isEmptyUserInfo) { // 用户未完善信息
							throw new Error("请先完善用户信息")
						}
					} else {
						const canConfirm = await toastComfirm("确定创建吗？")
						if (!canConfirm) {
							return;
						}
					}

					await Table.create(TableTypesEnum[type]);
					toast("创建成功")
				} catch (e) {
					toast(e.message)
				}

			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.header-bg {
			background-color: $primayColor;
			width: 100%;
			position: absolute;
			// top: var(--status-bar-height);
			height: $headerBgHeight;
			z-index: -999;
			border-radius: 0 0 $headerBgRadius $headerBgRadius;
		}


		.swiper-container {
			width: 100%;
			padding-top: 18rpx;

			.swiper {
				width: 720rpx;
				background-color: #FFFFFF;
				border-radius: 10rpx;
				overflow: hidden;

				.image {
					width: 100%;
					border-radius: 10rpx;
					height: 100%;
				}
			}
		}

		.menu-container {
			padding-top: 20rpx;

			.grid {
				display: flex;
				width: 100%;
				flex-direction: row;
				align-items: center;
				justify-content: space-around;

				.grid-item {}
			}

			.menu-item {
				.icon {
					width: 104rpx;
					height: 104rpx;
				}

				.text {
					font-size: 26rpx;
					color: $textBlock;
				}
			}
		}

		.segmented-container {
			.segmented {}
		}

		.tags-coantainer {
			.tags {
				width: 650rpx;

			}

		}

		.goods-container {
			padding: 20rpx 20rpx;

		}

		.tools {
			width: 100%;
			box-sizing: border-box;
			padding: 10rpx;
			padding-top: 0;

			.bg-image {
				width: 100%;
				height: 100%;
				opacity: 1;
			}

			.item {
				flex: 1;
				padding: 10rpx;

				.section {
					height: 150rpx;
					position: relative;
					padding: 10rpx 0;

					.label {
						position: absolute;
						top: 20rpx;
						left: 0;
						right: 0;
						color: #FFFFFF;
						font-size: 32rpx;
						text-align: center;
					}

					.value {
						position: absolute;
						top: 50rpx;
						height: calc(100% - 50rpx);
						botton: 0;
						left: 0;
						right: 0;
						color: #FFFFFF;
						font-size: 48rpx;
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;
					}

				}
			}


		}


	}
</style>
